<template>
  <div class="rate-wrap" :class="{readonly: readonly}">
    <span class="item" 
      v-for="index in total" 
      :key="index" 
      :class="lightClass[index - 1]"
      @mouseover="onMouseover(index)"
      @mouseout="onMouseout"
      @click="onClick(index)">
    </span>
    <span class="tip-text" v-if="isDispay"
      v-show="text" 
      v-text="text">
    </span>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: Number,
        default: 0
      },
      total: {
        type: Number,
        default: 5
      },
      mode: { // full, half
        type: String,
        default: 'full'
      },
      texts: {
        type: Array,
        default() {
          return ['很不好', '不好', '一般', '好', '很好']
        }
      },
      readonly: {
        type: Boolean,
        default: false
      },
      isDispay: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        curIndex: this.value || 0,
        text: ''
      }
    },
    mounted() {
      if (this.readonly) {
        this.text = `${this.curIndex} ${this.texts[Math.floor(this.curIndex - 1)]}`
      } else {
        this.$emit('input', this.curIndex)
      }
    },
    computed: {
      lightClass() {
        let result = []
        const score = Math.floor(this.curIndex * 2) / 2
        const hasDecimal = score % 1 !== 0
        const integer = Math.floor(score)
        for (let i = 0; i < integer; i++) {
          result.push('full')
        }
        if (hasDecimal) {
          result.push('half')
        }
        while (result.length < this.total) {
          result.push('off')
        }
        return result
      }
    },
    methods: {
      onMouseover(index) {
        if (this.readonly) return
        this.curIndex = index
        this._setTipText()
      },
      onMouseout() {
        if (this.readonly) return
        this.curIndex = this.value
        this._setTipText()
      },
      onClick(index) {
        if (this.readonly) return
        this.curIndex = index
        this._setTipText()
        this.$emit('input', index)
      },
      _setTipText() {
        this.text = this.texts[this.curIndex - 1]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .rate-wrap {
    display: inline-block;
    &.readonly {
      .item {
        cursor: default;
      }
    }
    .item {
      display: inline-block;
      width: 22px;
      height: 22px;
      background: url('../../assets/grey-start.png') no-repeat center center;
      cursor: pointer;
      vertical-align: middle;
      &.off {
        background-position: 0 0;
      }
      &.full {
        // background-position: 0 -30px;
        background: url('../../assets/start-hover.png') no-repeat center center;
        background-position: 0 0;
      }
      &.half {
        background-position: 0 -60px;
      }
    }
    .tip-text {
      display: inline-block;
      margin-left: 5px;
      line-height: 30px;
      vertical-align: top;
    }
  }
</style>